import React, { Component } from 'react'
import Banner from "../banner"
import action from '../../store/action'
import { LeftOutlined, HeartOutlined, ShoppingCartOutlined } from "@ant-design/icons"

import { Button } from 'antd'
import { connect } from 'react-redux'
class Particulars extends Component {
    state = {
        active: false,
    }
    render() {
        let { classifyDetail } = this.props
        console.log(classifyDetail.classBanner);
        return (
            <div className="particulars">
                <div className="particularsTop">
                    {/* 返回按钮 */}
                    <span className="particularsBack" onClick={()=>{
                        this.props.history.push('/home')
                    }}>
                        <LeftOutlined />
                    </span>
                    {/* 轮播图 */}
                    {/* <Banner BannerList={JSON.parse(classifyDetail.classBanner)}></Banner> */}
                    <Banner BannerList={classifyDetail.classBanner} />
                    {/* 详情内容 */}
                    <div className="particularsMain">
                        <h2>{classifyDetail.classTitle}</h2>
                        <div className="particularsMain_price">
                            <span className="money">
                                ￥{classifyDetail.classPrice}
                            </span>
                            <span>
                                购买人数{classifyDetail.Peoplebuy}
                            </span>
                            <span>
                                观看人数{classifyDetail.seePeople}w
                            </span>
                        </div>
                        <p className="particulars_course_intro">{classifyDetail.introduce}</p>
                        <div className="particulars_course_footer">
                            <div className="lecturer">
                                <p>老师介绍</p>
                                <div className="lecturerCon">
                                    <div className="lecturerCon_left">
                                        <img src={classifyDetail.classImg} alt="" />
                                    </div>
                                    <div className="lecturerCon_rig">
                                        <h3>{classifyDetail.jiNeng}</h3>
                                    </div>
                                </div>
                            </div>
                            <div className="courseDescription">
                                <p>课程详情</p>
                                <img src="https://wx4.sinaimg.cn/mw2000/006WxrJMly1gvu2psdc5bj30ae3aokjl.jpg" alt="" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* 加入购物车操作 */}
                <div className="particulars_foot">
                    <div onClick={() => {

                        let flag = true
                        this.setState({ active: !this.state.active })
                        if (this.props.collect.length !== 0) {
                            let i = this.props.collect.findIndex(item => {
                                return item.cid === classifyDetail.cid
                            })
                            if (i !== -1) {
                                flag = false
                                this.props.collect[i].collectType = 
                                this.props.deleteCollect(i)
                                this.setState({ active: false })
                            } else {
                                flag = true
                                this.setState({ active: true })
                            }
                        }
                        if (flag) {
                            this.props.setCollect({ ...classifyDetail, active: true })
                        }
                    }}>
                        <HeartOutlined className={classifyDetail.collectType ? "collectactive" : ""} />
                        <p>收藏</p>

                    </div>

                    <div className="shopCars" onClick={() => {
                        this.props.history.push("/car")
                    }}>
                        <ShoppingCartOutlined />
                        <p>
                            购物车

                            {this.props.AllCount > 0 ? <span className="shopcarNum">{this.props.AllCount}</span> : ""}

                        </p>
                    </div>
                    <div>
                        <Button type="primary" className="addCar" onClick={() => {
                            let obj = {
                                ...classifyDetail,
                                count: 1,
                                isChecked: false,
                                coupon: 10,
                            }
                            this.props.getAllMoney()
                            this.props.addshopCar({ obj, cid: classifyDetail.cid })
                            this.props.getAllCount()
                        }}>加入购物车</Button>
                    </div>
                    <div>
                        <Button type="primary" className="purchaseNow" onClick={() => {
                            this.props.history.push("/confirmOrder")
                        }}>立即购买</Button>
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount() {
        let { toClassifyDetail, classifyDetail,getAllCount } = this.props
        if (classifyDetail.length === null) {
            toClassifyDetail()
        }
        getAllCount()
    }
}
export default connect(state => state.home, action.home)(Particulars)